<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>Dashboard Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link href="../static/asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="../static/asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
		<style type="text/css">
			/* Chart.js */
			.div2{
				margin-bottom: 20px;
				margin-top: 20px;
			}
			@-webkit-keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			@keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			.chartjs-render-monitor {
				-webkit-animation: chartjs-render-animation 0.001s;
				animation: chartjs-render-animation 0.001s;
			}
		</style>
	</head>

	<body>
				<main role="main" class="col-lg-10 pt-3 px-4">
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<form th:action="@{'/bill/'+${payid}}" method="post">
								<div class="form-group">
									<label >起始日期</label>
									<input type="text" class="form-control" id="exampleInputDate1" name="BeginDate"  placeholder="样式: 年/月/日" th:value="${Begin!=null}?${Begin}">
								</div>
								<div class="form-group">
									<label >截止日期</label>
									<input type="text" class="form-control" id="exampleInputDate2" name="EndDate" placeholder="样式: 年/月/日" th:value="${End!=null}?${End}">
									<small id="emailHelp" class="form-text text-muted">使用以上功能可以按照日期查询账单,必须同时输入起始和截至日期</small>
								</div>
								<button type="submit" class="btn btn-primary">查询</button>
							</form>

							<thead>
								<tr>
									<th>转账方式</th>
									<th>付款方账号</th>
									<th>收款方账号</th>
									<th>转账金额</th>
									<th>转账时间</th>
									<th>留言</th>
								</tr>
							</thead>
							<tbody>

							<div class="div2">
								<tr th:each="trans:${transfers}">
									<td th:text="${trans.getTransfer_pay_type()}"></td>
									<td th:text="${trans.getTransfer_pay_id()}"></td>
									<td th:text="${trans.getTransfer_target_id()}"></td>
									<td th:text="${trans.getTransfer_amount()}"></td>
									<td th:text="${#dates.format(trans.getTransfer_date(),'yyyy-MM-dd HH:mm')}"></td>
									<td th:text="${trans.getTransfer_description()}"></td>
								</tr>
							</div>
							</tbody>
						</table>
					</div>
					<div>
<!--						<canvas id="cavsElem">-->
<!--							你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本-->
<!--						</canvas>-->
<!--						<script>-->
<!--							(function () {-->
<!--								var canvas = document.getElementById('cavsElem'); //获得画布-->
<!--								var ctx = canvas.getContext('2d'); //注意：2d小写， 3d：webgl-->
<!--								canvas.width = 1800; //设置标签的属性宽高-->
<!--								canvas.height = 900;-->
<!--								// canvas.style.border = '1px solid #000';-->

<!--								var data =[-->
<!--									{-->
<!--										"value":.2,-->
<!--										"color":"red",-->
<!--										"title":"零钱:￥200"-->

<!--									}, {-->
<!--										"value":.3,-->
<!--										"color":"green",-->
<!--										"title":"工行:￥300"-->

<!--									}, {-->
<!--										"value":.4,-->
<!--										"color":"blue",-->
<!--										"title":"建行:￥400"-->

<!--									}, {-->
<!--										"value":.1,-->
<!--										"color":"#ccc",-->
<!--										"title":"农行:￥100"-->

<!--									}-->
<!--								];-->
<!--								var tempAngle = -0.5*Math.PI;-->
<!--								var x0=700,y0=400;-->
<!--								var radius=200;-->
<!--								for( var i=0;i<data.length;i++){-->
<!--									ctx.beginPath();-->
<!--									ctx.moveTo(x0,y0);-->
<!--									ctx.fillStyle=data[i].color;-->
<!--									var StartAngle = tempAngle;-->
<!--									var EndAngle = tempAngle+2*Math.PI*data[i].value;-->
<!--									ctx.arc(x0,y0,radius,StartAngle,EndAngle);-->
<!--									ctx.fill();-->
<!--									//绘制百分比文字-->
<!--									ctx.beginPath();-->
<!--									var txt = data[i].value*100+'%';-->
<!--									var x, y ,x1 ,y1;-->
<!--									var txtAngle = tempAngle+Math.PI*data[i].value-->
<!--									x=x0+Math.cos(txtAngle)*(radius-90);-->
<!--									y=y0+Math.sin(txtAngle)*(radius-90);-->
<!--									ctx.textAlign='center'-->
<!--									// if(txtAngle>1/2*Math.PI&&tempAngle<3/2*Math.PI){-->
<!--									//     ctx.textAlign='end';-->
<!--									// }-->
<!--									ctx.fillStyle = 'black'; //设置填充颜色为紫色-->
<!--									ctx.font = '20px "微软雅黑"'; //设置字体-->
<!--									ctx.fillText(txt,x,y)-->


<!--									//绘制type-->
<!--									ctx.beginPath();-->
<!--									x1=x0+Math.cos(txtAngle)*(radius+20);-->
<!--									y1=y0+Math.sin(txtAngle)*(radius+20);-->
<!--									ctx.textAlign='start';-->
<!--									if(txtAngle>1/2*Math.PI&&tempAngle<3/2*Math.PI){-->
<!--										ctx.textAlign='end';-->
<!--									}-->
<!--									ctx.fillStyle = 'black'; //设置填充颜色为紫色-->
<!--									ctx.font = '20px "微软雅黑"'; //设置字体-->
<!--									ctx.fillText(data[i].title,x1,y1)-->

<!--									tempAngle = EndAngle;-->
<!--								}-->
<!--								ctx.stroke(); //描边路径-->
<!--							}());-->
<!--						</script>-->
					</div>


					<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
					<div id="chartContainer1" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>

				</main>
			</div>
		</div>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->

		<script>
			var xmlhttp=new XMLHttpRequest();
			var url="../Turnover/"+[[${payid}]];
			if([[${url1!=null}]]) {
				url = "[[${url1}]]&[[${url2}]]";
				console.log(url);
			}
			// var url="http://localhost:8080/Turnover/2";
			var type="GET";//方法
			xmlhttp.open(type,url,false);//方法，接口，异步
			xmlhttp.send();

			var result=JSON.parse(xmlhttp.response);
			id=[[${payid}]];
			console.log(id);
			var day2 = new Date();
			day2.setTime(day2.getTime());
			var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();


			window.onload = function () {
				// var t=[[${dataPoints}]];
				var chart = new CanvasJS.Chart("chartContainer", {
					theme: "light2",
					animationEnabled: true,
					title: {
						text: "用户"+[[${payid}]]+"的统计数据"
					},
					subtitles: [{
						text: "截止到"+s2,
						fontSize: 16
					}],
					data: [{
						type: "pie",
						indexLabelFontSize: 18,
						radius: 1300,
						indexLabel: "{account_type}  {y}",
						yValueFormatString: "###0.0'￥'",
						click: explodePie,
						dataPoints: result
					}]
				});
				chart.render();

				function explodePie(e) {
					for(var i = 0; i < e.dataSeries.dataPoints.length; i++) {
						if(i !== e.dataPointIndex)
							e.dataSeries.dataPoints[i].exploded = false;
					}
				}



				var chart1 = new CanvasJS.Chart("chartContainer1", {
					animationEnabled: true,

					title:{
						text:""
					},
					axisX:{
						interval: 1
					},
					axisY2:{
						interlacedColor: "rgba(1,77,101,.2)",
						gridColor: "rgba(1,77,101,.1)",
						title: ""
					},
					data: [{
						type: "bar",
						name: "companies",
						labels:"account_type",
						axisYType: "secondary",
						indexLabel: "{account_type}  {y}",
						yValueFormatString: "###0.0'￥'",
						color: "#014D65",
						dataPoints: result
					}]
				});
				chart1.render();

			}
		</script>
		<script th:src="@{/asserts/js/canvasjs.min.js}" ></script>
		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
		<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>
		<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>

		<!-- Icons -->
		<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>
		<script>
			feather.replace()
		</script>


	</body>

</html>